<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>后台管理系统</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


  <!-- App favicon -->
  <link rel="shortcut icon" href="assets/images/favicon.ico">

  <!-- App css -->
  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="css/icons.min.css" rel="stylesheet" type="text/css" />
  <link href="css/app.min.css" rel="stylesheet" type="text/css" />
  <!-- App js -->
  <script src="/js/vendor.min.js"></script>
  <script src="/js/app.min.js"></script>

  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>

  <script src="echarts.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js">

  </script>

</head>

<body>

<div id="app">
  <!-- Navigation Bar-->
  <header id="topnav">
    <nav class="navbar-custom">

      <div class="container-fluid">
        <ul class="list-unstyled topbar-right-menu float-right mb-0">

          <li class="dropdown notification-list">
            <!-- Mobile menu toggle-->
            <a class="navbar-toggle nav-link">
              <div class="lines">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </a>
            <!-- End mobile menu toggle-->
          </li>



          <li class="dropdown notification-list">
            <a class="nav-link dropdown-toggle nav-user mr-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
              <img src="assets/images/users/2.jpg" alt="user-image" class="rounded-circle">
              <small class="pro-user-name ml-1">
                Admin
              </small>
            </a>
            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown ">
              <!-- item-->
              <div class="dropdown-header noti-title">
                <h6 class="text-overflow m-0">欢迎 !</h6>
              </div>

              <!-- item-->
              <a href="adminInfo.html" class="dropdown-item notify-item">
                <i class="fe-user"></i>
                <span>管理员信息</span>
              </a>

              <!-- item-->
              <a href="adminJournal.html" class="dropdown-item notify-item">
                <i class="fe-settings"></i>
                <span>日志</span>
              </a>

              <div class="dropdown-divider"></div>

              <!-- item-->
              <a href="pages-login.html" class="dropdown-item notify-item">
                <i class="fe-log-out"></i>
                <span>退出</span>
              </a>

            </div>
          </li>

        </ul>

        <ul class="list-inline menu-left mb-0">
          <li class="float-left">
            <a href="page-index.html" class="logo">
                                <span class="logo-lg" >
                                    <img src="assets/images/111.png" alt="" height="42">
                                </span>
              <!-- <span class="logo-sm">
                  <img src="assets/images/logo-sm.png" alt="" height="28">
              </span> -->
            </a>
          </li>
          <!--                        <li class="app-search">-->
          <!--                            <form>-->
          <!--                                <h2 style="color: azure;">学 习 养 成 计 划</h2>-->
          <!--                            </form>-->
          <!--                        </li>-->
        </ul>
      </div>

    </nav>
    <!-- end topbar-main -->

    <div class="topbar-menu">
      <div class="container-fluid">
        <div id="navigation">
          <!-- Navigation Menu-->
          <ul class="navigation-menu">

            <li class="has-submenu">
              <a href="page-index.html">
                <i class="fe-airplay"></i>首页</a>
            </li>

            <li class="has-submenu">
              <a href="userQuery.html">
                <i class="fe-user"></i>用户管理</a>
            </li>

            <li class="has-submenu">
              <a href="taskQuery.html">
                <i class="mdi mdi-codepen"></i>任务管理</a>
            </li>

            <li class="has-submenu">
              <a href="tipQuery.html">
                <i class="mdi mdi-brightness-5"></i>心得管理</a>
            </li>



            <li class="has-submenu">
              <a href="chartUser.html"> <i class="mdi mdi-elevation-rise"></i>数据分析</a>
              <ul class="submenu">
                <li>
                  <a href="chartUser.html">用户分析</a>
                </li>
                <li>
                  <a href="chartTask.html">任务分析</a>
                </li>
                <li>
                  <a href="chartTip.html">心得分析</a>
                </li>
                <li>
                  <a href="chartAction.html">单个用户行为分析</a>
                </li>
              </ul>
            </li>



          </ul>
          <!-- End navigation menu -->

          <div class="clearfix"></div>
        </div>
        <!-- end #navigation -->
      </div>
      <!-- end container -->
    </div>
    <!-- end navbar-custom -->
  </header>
  <!-- End Navigation Bar-->

  <div class="wrapper" style="padding-top: 65px;">
    <div class="container-fluid">

      <!-- start page title -->
      <div class="row">
        <div class="col-12">
          <div class="page-title-box">
            <div class="page-title-right">
              <ol class="breadcrumb m-0">
                <li class="breadcrumb-item"><a href="page-index.html">洋葱</a></li>
                <li class="breadcrumb-item"><a href="chartUser.html">用户数量分析</a></li>
              </ol>
            </div>
            <h4 class="page-title">用户数量分析</h4>

            <div class="row">
              <div class="col-xl-3 col-lg-6">
                <div class="card widget-flat">
                  <div class="card-body p-0">
                    <div class="p-3 pb-0">
                      <div class="float-right">
                        <i class="mdi mdi-emoticon-excited text-primary widget-icon"></i>
                      </div>
                      <h5 class="text-muted font-weight-normal mt-0">用户总数</h5>
                      <h3 class="mt-2">3,543</h3>
                    </div>
                    <div id="sparkline1"></div>
                  </div> <!-- end card-body-->
                </div> <!-- end card-->
              </div> <!-- end col-->

              <div class="col-xl-3 col-lg-6">
                <div class="card widget-flat">
                  <div class="card-body p-0">
                    <div class="p-3 pb-0">
                      <div class="float-right">
                        <!--                  <i class="mdi mdi-currency-usd text-danger widget-icon"></i>-->
                        <i class="mdi mdi-android-head text-danger widget-icon"></i>

                      </div>
                      <h5 class="text-muted font-weight-normal mt-0">今日新增用户</h5>
                      <h3 class="mt-2">25,617</h3>
                    </div>
                    <div id="sparkline2"></div>
                  </div> <!-- end card-body-->
                </div> <!-- end card-->
              </div> <!-- end col-->

              <div class="col-xl-3 col-lg-6">
                <div class="card widget-flat">
                  <div class="card-body p-0">
                    <div class="p-3 pb-0">
                      <div class="float-right">
                        <i class=" mdi mdi-approval text-primary widget-icon"></i>
                      </div>
                      <h5 class="text-muted font-weight-normal mt-0">任务总数</h5>
                      <h3 class="mt-2">5,387</h3>
                    </div>
                    <div id="sparkline3"></div>
                  </div> <!-- end card-body-->
                </div> <!-- end card-->
              </div> <!-- end col-->

              <div class="col-xl-3 col-lg-6">
                <div class="card widget-flat">
                  <div class="card-body p-0">
                    <div class="p-3 pb-0">
                      <div class="float-right">
                        <i class="mdi mdi-eye-outline text-danger widget-icon"></i>
                      </div>
                      <h5 class="text-muted font-weight-normal mt-0">心得发布数</h5>
                      <h3 class="mt-2">74,315</h3>
                    </div>
                    <div id="sparkline4"></div>
                  </div> <!-- end card-body-->
                </div> <!-- end card-->
              </div> <!-- end col-->
            </div>
            <!-- end row -->

            <div class="row">
              <div class="col-xl-12">

                <!--                   用户总人数分析                     -->
                <div class="card">
                  <div class="card-body">
                    <h4 class="fe-arrow-down-right header-title"><strong>每日新建任务总数</strong></h4>

                    <div class="row" style="height:350px;" id="main1"></div>

                  </div>
                </div>
                <!--                   用户总人数分析                     -->
                <div class="row">

                  <div class="col-xl-6">

                    <div class="card">
                    <div class="card-body">
                      <h4 class="fe-arrow-down-right header-title"><strong>每日新建待办任务数</strong></h4>

                      <div class="row" style="height:350px;" id="main2"></div>

                    </div>
                  </div>

                  </div>

                  <div class="col-xl-6">

                    <div class="card">
                      <div class="card-body">
                        <h4 class="fe-arrow-down-right header-title"><strong>每日新建计时任务数</strong></h4>

                        <div class="row" style="height:350px;" id="main3"></div>

                      </div>
                      </div>

                  </div>

                </div>

                <!--                end div row-->

                <div class="row">

                  <div class="col-xl-6">

                    <div class="card">
                      <div class="card-body">
                        <h4 class="fe-arrow-down-right header-title"><strong>每日计时任务创建人数</strong></h4>

                        <div class="row" style="height:350px;" id="main4"></div>

                      </div>
                    </div>

                  </div>

                  <div class="col-xl-6">

                    <div class="card">
                      <div class="card-body">
                        <h4 class="fe-arrow-down-right header-title"><strong>每日待办任务创建人数</strong></h4>

                        <div class="row" style="height:350px;" id="main5"></div>

                      </div>
                    </div>

                  </div>

                </div>
              </div>
            </div>



              </div>
            <!-- end row -->

          </div>
        </div>
      </div>
      <!-- end page title -->


    </div> <!-- end container -->
  </div>
  <!-- end wrapper -->
  <!--        此处编辑主要内容：-->







  <!-- Footer Start -->
  <footer class="footer">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
          YangCong Admin &copy; 2021 - tecms.net
        </div>
        <div class="col-md-6">
          <div class="text-md-right footer-links d-none d-sm-block">
            <a href="#">关于我们</a>
            <a href="#">帮助</a>
            <a href="#">联系我们</a>
          </div>
        </div>
      </div>
    </div>
  </footer>        <!-- end Footer -->



</div>


</body>
</html>

<script type="text/javascript">
  //2.1日新建任务总数柱状图
  $(function(){
    var myCharts=echarts.init(document.getElementById('main1'));
    myCharts.setOption({
      toolbox: {
        show: true,
        feature: {
          magicType: { type: ['bar','line', ] },//转换为折线图
          restore: {},//重置
          dataView: { readOnly: false },       //查看数据
          saveAsImage: {}                      //保存为图片
        }
      },
      xAxis : {
        data : [],
        "splitLine": {     //网格线
          "show": false},
        "axisTick":{       //y轴刻度线
          "show":false
        },
        axisLine: {
          show: false,//不显示坐标轴线
        },
        axisLabel: {
          show: true,//显示坐标轴上的文字
        },},
      yAxis : {
        "splitLine": {     //网格线
          "show": false},
        "axisTick":{       //y轴刻度线
          "show":false
        },
        axisLabel:{
          color: '#000000', //y轴字体显示颜色
        },
        axisLine: {
          show: false,//不显示坐标轴线
        },
        axisLabel: {
          show: false,//不显示坐标轴上的文字
        },
      },
      series : [
        {
          name:'日新建任务总数',
          type:'bar',
          data:[]
        }
      ]
    });
    //加载时显示loading动画
    myCharts.showLoading();
    //放x轴值的日期的数组
    var date_time=[];
    //放y轴值的创建任务数量的数组
    var count=[];
    //利用ajax从后台给数组存值
    $.ajax({
      type: "get",
      url: "http://localhost:8080/task/all",     //请求发送到Controller list处
      dataType: "json",        //返回数据形式为json
      success: function (data) {
        //请求成功时执行该函数内容，result即为服务器返回的json对象
        $(data).each(function(i,e){
          console.log("2")
          date_time.push(e.date_time);    //取出创建任务日期并存入数组
          console.log("3")
          count.push(e.count);     //取出每日创建的任务数并存入数组
        });
        console.log("1")
        myCharts.hideLoading();    //隐藏加载动画
        myCharts.setOption({        //加载数据图表
          xAxis: {
            data: date_time
          },
          dataZoom: [
            {
              show: false,
              start: 0,
              end: 100
            },
            {
              type: 'inside',
              start: 94,
              end: 100
            },
            {
              show: false,
              yAxisIndex: 0,
              filterMode: 'empty',
              width: 30,
              height: '80%',
              showDataShadow: false,
              left: '93%'
            }
          ],

          series: [{
            // 根据名字对应到相应的系列
            name: '日新建任务总数',
            type:'bar',
            barWidth: '30%',
            data: count,
            itemStyle:{
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius:[10],
                label: {
                  show: true,	//是否展示
                  position: 'top', //在上方显示
                  textStyle: {	//数值样式
                    fontSize : '12',
                  }
                },
                color: new echarts.graphic.LinearGradient(
                        1, 0, 0, 0, //哈哈哈，原来在这更改渐变方向，我的天
                        [
                          {offset: 0, color: '#578bce'},
                          {offset: 1, color: '#95c7e0'}
                        ]
                )
              }},
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
          }]
        });
      },
      error: function (errorMsg) {
        //请求失败时执行该函数
        alert("图表请求数据失败!");
        myCharts.hideLoading();
      }
    })
  });

  //2.2日新建待办任务数柱状图

    $(function(){
    var myCharts=echarts.init(document.getElementById('main2'));
    myCharts.setOption({
    toolbox: {
    show: true,
    feature: {
    magicType: { type: ['line','bar', ] },//转换为折线图
    restore: {},//重置
    dataView: { readOnly: false },       //查看数据
    saveAsImage: {}                      //保存为图片
  }
  },
    xAxis : {                data : [],
    "splitLine": {     //网格线
    "show": false},
    "axisTick":{       //y轴刻度线
    "show":false
  },
    axisLine: {
    show: false,//不显示坐标轴线
  },
    axisLabel: {
    show: true,//显示坐标轴上的文字
  },},
    yAxis : {
    "splitLine": {     //网格线
    "show": false},
    "axisTick":{       //y轴刻度线
    "show":false
  },
    axisLabel:{
    color: '#000000', //y轴字体显示颜色
  },
    axisLine: {
    show: false,//不显示坐标轴线
  },
    axisLabel: {
    show: false,//不显示坐标轴上的文字
  },
  },

  });
    //加载时显示loading动画
    myCharts.showLoading();
    //放x轴值的日期的数组
    var taskDateToDo=[];
    //放y轴值的创建任务数量的数组
    var countToDo=[];
    //利用ajax从后台给数组存值
    $.ajax({
    type: "get",
    url: "http://localhost:8080/task/taskToDo/list",     //请求发送到Controller list处
    dataType: "json",        //返回数据形式为json
    success: function (data) {
    //请求成功时执行该函数内容，result即为服务器返回的json对象
    $(data).each(function(i,e){
    console.log("2")
    taskDateToDo.push(e.taskDateToDo);    //取出创建任务日期并存入数组
    console.log("3")
    countToDo.push(e.countToDo);     //取出每日创建的任务数并存入数组
  });
    console.log("1")
    myCharts.hideLoading();    //隐藏加载动画
    myCharts.setOption({        //加载数据图表
    xAxis: {
    data: taskDateToDo
  },
    dataZoom: [
  {
    show: false,
    start: 0,
    end: 100
  },
  {
    type: 'inside',
    start: 94,
    end: 100
  },
  {
    show: false,
    yAxisIndex: 0,
    filterMode: 'empty',
    width: 30,
    height: '80%',
    showDataShadow: false,
    left: '93%'
  }
    ],
    series: [{
    // 根据名字对应到相应的系列
    name: '日新建待办任务数',
    type:'line',
    barWidth: '30%',
    data: countToDo,
    smooth:true,
    color:"rgb(15,84,130)",
    itemStyle:{
    normal: {
    //柱形图圆角，初始化效果
    barBorderRadius:[10],
    label: {
    show: true,	//是否展示
    position: 'top', //在上方显示
    textStyle: {	//数值样式
    fontSize : '12',
  }
  },
    color: new echarts.graphic.LinearGradient(
    1, 0, 0, 0, //哈哈哈，原来在这更改渐变方向，我的天
    [
  {offset: 0, color: '#578bce'},
  {offset: 1, color: '#95c7e0'}
    ]
    )
  }},
    areaStyle: {
    opacity: 0.8,
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  {
    offset: 0,
    color: 'rgb(54,148,212)'
  },
  {
    offset: 1,
    color: 'rgb(239,240,245)'
  }
    ])
  },

  }]
  });
  },
    error: function (errorMsg) {
    //请求失败时执行该函数
    alert("图表请求数据失败!");
    myCharts.hideLoading();
  }
  })
  });

    //2.3日新建计时任务数柱状图

    $(function(){
    var myCharts=echarts.init(document.getElementById('main3'));
    myCharts.setOption({
    toolbox: {
    show: true,
    feature: {
    magicType: { type: ['bar','line', ] },//转换为折线图
    restore: {},//重置
    dataView: { readOnly: false },       //查看数据
    saveAsImage: {}                      //保存为图片
  }
  },
    xAxis : {
    data : [],
    "splitLine": {     //网格线
    "show": false},
    "axisTick":{       //y轴刻度线
    "show":false
  },
    axisLine: {
    show: false,//不显示坐标轴线
  },
    axisLabel: {
    show: true,//显示坐标轴上的文字
  },},
    yAxis : {
    "splitLine": {     //网格线
    "show": false},
    "axisTick":{       //y轴刻度线
    "show":false
  },
    axisLabel:{
    color: '#000000', //y轴字体显示颜色
  },
    axisLine: {
    show: false,//不显示坐标轴线
  },
    axisLabel: {
    show: false,//不显示坐标轴上的文字
  },
  },
    series : [
  {
    name:'日新建待办任务数',
    type:'bar',
    data:[]
  }
    ]
  });
    //加载时显示loading动画
    myCharts.showLoading();
    //放x轴值的日期的数组
    var taskDateClock=[];
    //放y轴值的创建任务数量的数组
    var countClock=[];
    //利用ajax从后台给数组存值
    $.ajax({
    type: "get",
    url: "http://localhost:8080/task/taskClock/list",     //请求发送到Controller list处
    dataType: "json",        //返回数据形式为json
    success: function (data) {
    //请求成功时执行该函数内容，result即为服务器返回的json对象
    $(data).each(function(i,e){
    console.log("2")
    taskDateClock.push(e.taskDateClock);    //取出创建任务日期并存入数组
    console.log("3")
    countClock.push(e.countClock);     //取出每日创建的任务数并存入数组
  });
    console.log("1")
    myCharts.hideLoading();    //隐藏加载动画
    myCharts.setOption({        //加载数据图表
    xAxis: {
    data: taskDateClock
  },
      dataZoom: [
        {
          show: false,
          start: 0,
          end: 100
        },
        {
          type: 'inside',
          start: 94,
          end: 100
        },
        {
          show: false,
          yAxisIndex: 0,
          filterMode: 'empty',
          width: 30,
          height: '80%',
          showDataShadow: false,
          left: '93%'
        }
      ],
    series: [{
    // 根据名字对应到相应的系列
    name: '日新建计时任务数',
    type:'bar',
    barWidth: '30%',
    data: countClock,
    itemStyle:{
    normal: {
    //柱形图圆角，初始化效果
    barBorderRadius:[10],
    label: {
    show: true,	//是否展示
    position: 'top', //在上方显示
    textStyle: {	//数值样式
    fontSize : '12',
  }
  },
    color: new echarts.graphic.LinearGradient(
    1, 0, 0, 0, //哈哈哈，原来在这更改渐变方向，我的天
    [
  {offset: 0, color: '#57b2ce'},
  {offset: 1, color: '#95c7e0'}
    ]
    )
  }},
    markPoint: {
    data: [
  { type: 'max', name: 'Max' },
  { type: 'min', name: 'Min' }
    ]
  },
    markLine: {
    data: [{ type: 'average', name: 'Avg' }]
  },
    showBackground: true,
  }]
  });
  },
    error: function (errorMsg) {
    //请求失败时执行该函数
    alert("图表请求数据失败!");
    myCharts.hideLoading();
  }
  })
  });

    //2.4计时任务创建人数柱状图
    $(function(){
    var myCharts=echarts.init(document.getElementById('main4'));
    myCharts.setOption({
    toolbox: {
    show: true,
    feature: {
    magicType: { type: ['bar','line', ] },//转换为折线图
    restore: {},//重置
    dataView: { readOnly: false },       //查看数据
    saveAsImage: {}                      //保存为图片
  }
  },
    xAxis : {
    "splitLine": {     //网格线
    "show": false},
    "axisTick":{       //y轴刻度线
    "show":false
  },
    axisLine: {
    show: false,//不显示坐标轴线
  },
    axisLabel: {
    show: false,//显示坐标轴上的文字
  },

  },
    yAxis : {
    data : [],
    "splitLine": {     //网格线
    "show": false},
    "axisTick":{       //y轴刻度线
    "show":false
  },
    axisLabel:{
    color: '#000000', //y轴字体显示颜色
  },
    axisLine: {
    show: false,//不显示坐标轴线
  },
    axisLabel: {
    show: true,//不显示坐标轴上的文字
  },
  },
    series : [
  {
    name:'活跃用户人数柱状图',
    type:'bar',
    data:[]
  }
    ]
  });
    //加载时显示loading动画
    myCharts.showLoading();
    //放x轴值的日期的数组
    var clockUser=[];
    //放y轴值的创建任务数量的数组
    var clockDate=[];
    //利用ajax从后台给数组存值
    $.ajax({
    type: "get",
    url: "/task/clockUser/list",     //请求发送到Controller list处
    dataType: "json",        //返回数据形式为json
    success: function (data) {
    //请求成功时执行该函数内容，result即为服务器返回的json对象
    $(data).each(function(i,e){
    console.log("2")
    clockDate.push(e.clockDate);    //取出创建任务日期并存入数组
    console.log("3")
    clockUser.push(e.clockUser);     //取出每日创建的任务数并存入数组
  });
    console.log("1")
    myCharts.hideLoading();    //隐藏加载动画
    myCharts.setOption({        //加载数据图表
    yAxis: {
    data: clockDate
  },
    dataZoom: [
  {
    show: false,
    start: 0,
    end: 100
  },
  {
    type: 'inside',
    start: 94,
    end: 100
  },
  {
    show: false,
    yAxisIndex: 0,
    filterMode: 'empty',
    width: 30,
    height: '80%',
    showDataShadow: false,
    left: '93%'
  }
    ],
    series: [{
    // 根据名字对应到相应的系列
    name: '活跃用户人数',
    type:'bar',
    barWidth: '30%',
    data: clockUser,
    itemStyle:{
    normal: {
    //柱形图圆角，初始化效果
    barBorderRadius:[10],
    label: {
    show: true,	//是否展示
    position: 'right', //在右方显示
    textStyle: {	//数值样式
    fontSize : '12',
  }
  },
    color: new echarts.graphic.LinearGradient(
    1, 0, 0, 0, //哈哈哈，原来在这更改渐变方向，我的天
    [
  {offset: 0, color: '#578bce'},
  {offset: 1, color: '#95c7e0'}
    ]
    )
  }},
    markPoint: {
    data: [
  { type: 'max', name: 'Max' },
  { type: 'min', name: 'Min' }
    ]
  },
    markLine: {
    data: [{ type: 'average', name: 'Avg' }]
  },
    color:"#008B8B ", //柱状图颜色
  }]
  });
  },
    error: function (errorMsg) {
    //请求失败时执行该函数
    alert("图表请求数据失败!");
    myCharts.hideLoading();
  }
  })
  });

    //2.5待办任务创建人数柱状图
    $(function(){
    var myCharts=echarts.init(document.getElementById('main5'));
    myCharts.setOption({
    toolbox: {
    show: true,
    feature: {
    magicType: { type: ['line','bar', ] },//转换为折线图
    restore: {},//重置
    dataView: { readOnly: false },       //查看数据
    saveAsImage: {}                      //保存为图片
  }
  },
    xAxis : {                data : [],
    "splitLine": {     //网格线
    "show": false},
    "axisTick":{       //y轴刻度线
    "show":false
  },
    axisLine: {
    show: false,//不显示坐标轴线
  },
    axisLabel: {
    show: true,//显示坐标轴上的文字
  },},
    yAxis : {
    "splitLine": {     //网格线
    "show": false},
    "axisTick":{       //y轴刻度线
    "show":false
  },
    axisLabel:{
    color: '#000000', //y轴字体显示颜色
  },
    axisLine: {
    show: false,//不显示坐标轴线
  },
    axisLabel: {
    show: false,//不显示坐标轴上的文字
  },
  },

  });
    //加载时显示loading动画
    myCharts.showLoading();
    //放x轴值的日期的数组
    var toDoDate=[];
    //放y轴值的创建任务数量的数组
    var toDoUser=[];
    //利用ajax从后台给数组存值
    $.ajax({
    type: "get",
    url: "http://localhost:8080/task/toDoUser/list",     //请求发送到Controller list处
    dataType: "json",        //返回数据形式为json
    success: function (data) {
    //请求成功时执行该函数内容，result即为服务器返回的json对象
    $(data).each(function(i,e){
    console.log("2")
    toDoDate.push(e.toDoDate);    //取出创建任务日期并存入数组
    console.log("3")
    toDoUser.push(e.toDoUser);     //取出每日创建的任务数并存入数组
  });
    console.log("1")
    myCharts.hideLoading();    //隐藏加载动画
    myCharts.setOption({        //加载数据图表
    xAxis: {
    data: toDoDate
  },
    dataZoom: [
  {
    show: false,
    start: 0,
    end: 100
  },
  {
    type: 'inside',
    start: 94,
    end: 100
  },
  {
    show: false,
    yAxisIndex: 0,
    filterMode: 'empty',
    width: 30,
    height: '80%',
    showDataShadow: false,
    left: '93%'
  }
    ],
    series: [{
    // 根据名字对应到相应的系列
    name: '日新建待办任务数',
    type:'line',
    barWidth: '30%',
    data: toDoUser,
    smooth:true,
    color:"rgb(15,84,130)",
    itemStyle:{
    normal: {
    //柱形图圆角，初始化效果
    barBorderRadius:[10],
    label: {
    show: true,	//是否展示
    position: 'top', //在上方显示
    textStyle: {	//数值样式
    fontSize : '12',
  }
  },
    color: new echarts.graphic.LinearGradient(
    1, 0, 0, 0, //哈哈哈，原来在这更改渐变方向，我的天
    [
  {offset: 0, color: '#578bce'},
  {offset: 1, color: '#95c7e0'}
    ]
    )
  }},
    areaStyle: {
    opacity: 0.8,
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  {
    offset: 0,
    color: 'rgb(54,148,212)'
  },
  {
    offset: 1,
    color: 'rgb(239,240,245)'
  }
    ])
  },

  }]
  });
  },
    error: function (errorMsg) {
    //请求失败时执行该函数
    alert("图表请求数据失败!");
    myCharts.hideLoading();
  }
  })
  });

</script>



